<template>
  <div>
      <h1>自助列表</h1>
        <p v-for="i in zizhu_list" :key="i.id">
            {{i.name}}---{{i.type |type_change}}---{{i.price}}
            <span v-if="i.status&i.is_user"><button @click="end_meishi(i.id)">结束</button></span>
            <span v-else-if="i.status&!i.is_user">正在食用</span>
            <span v-else><button @click="start_meishi(i.id)">选择</button></span>

        </p>

  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            uid:localStorage.getItem('uid'),
            zizhu_list:[]
        
        };
    },
    methods:{
        get_zizhu(){
            console.log(this.uid)
            axios.get('http://127.0.0.1:8000/app01/zizhu/?uid='+this.uid).then(res=>{
                this.zizhu_list=res.data.data
            })
        },
        start_meishi(zid){
            axios.post('http://127.0.0.1:8000/app01/meishi/',{'uid':this.uid,'zid':this.zid}).then(res=>{
                console.log(res.data)
                this.get_zizhu()
            })
        },
        end_meishi(zid){
            this.$router.push('/zizhu_info?zid='+zid)
        }
    },
    filters:{
        type_change:function(value){
            if(value==0){
                return'普通会员'
            }else{
                return'高级会员'
            }
        }

    },
    created(){
    this.get_zizhu()
        
    },
}

</script>
<style>
</style>